<!-- 业务测算表  -->
<template>
<div class="profitcalculation">


  <div class="head">
    <export-excel module-name="businessform_profitcalculation" file-name="业务利润核算表.xlsx"></export-excel>
    <h2>业务利润核算表</h2>
    <!-- <div class="head-ctrl">
      <div class="order-number">
        {{businessformNO}}
      </div>
      <el-button type="primary">导出</el-button>
    </div> -->

    <!-- <div class="head-number">
      编号NO：
      <el-input  :readonly="!editable"  v-model="data.bpc_no"></el-input>
    </div> -->

  </div>


   <div class="head-1">
      <img class="tcf-png" src="../../../../assets/img/tcf.png" alt="">
      <p style="font-weight:bolder;"> TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
      <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
      <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA"</p>
    </div>


    <div class="contract">
      <h1>SERVICE CHARGE INVOICE</h1>
      <div class="clearfix">
        <div class="contract-order">
          <el-form label-width="80px">
            <el-form-item label="编号NO:">
              <input class="address-input relate-color" placeholder="请输入相关内容" @input="handleSimpleInput('bpc_no', $event)" v-model="bpc_no"  :readonly="!editable" />
            </el-form-item>

            <el-form-item label="日期Date:">
              <el-date-picker class="relate-color" v-model="bpc_date" value-format="yyyy-MM-dd" @change="selectDate" :readonly="!editable" ></el-date-picker>
            </el-form-item>

          </el-form>
        </div>
      </div>


        <el-form label-width="120px">
          <el-form-item label="买方BUYER:">
            <input class="address-input relate-color"  placeholder="请输入相关内容" v-model="bpc_buyerName" @input="handleSimpleInput('bpc_buyerName', $event)" :readonly="!editable" />
          </el-form-item>

          <el-form-item label="地址ADDRESS:">
            <input class="address-input relate-color"  placeholder="请输入相关内容" v-model="bpc_buyerAddress" @input="handleSimpleInput('bpc_buyerAddress', $event)" :readonly="!editable" />
          </el-form-item>
        </el-form>

        <div class="contract-seller">
          <p><span>卖方SELLER:</span>天津金贸链进出口有限公司</p>
          <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
          <p><span>地址ADDERSS:</span>天津自贸试验区（空港经济区）环河南路88号2-2205号</p>
          <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
      </div>
    </div>


    <div class="table-1">
      <el-row>
        <el-col :span="4">
          <p>
            Buyer Credit limit <br/>买家资信额度
          </p>
        </el-col>
        <el-col :span="5">
          <span>$</span>
          <input type="text" placeholder="请输入内容" v-model="bpc_buyerCreditLimt" @input="handleSimpleInput('bpc_buyerCreditLimt', $event)">
        </el-col>
        <el-col :span="3">
          <p>
            Payment risk <br/> 付款风险
          </p>
        </el-col>
        <el-col :span="3">
          <input type="number" placeholder="请输入内容" v-model="bpc_paymentRisk" @input="handleTable1Input('bpc_paymentRisk', $event)">
          %
        </el-col>
        <el-col :span="3">
          <p>
            used credit limit <br/>已使用额度
          </p>
        </el-col>
        <el-col :span="6">
          <select v-model="bpc_usedCreditLimit_currency" @change="selectCurrency('bpc_usedCreditLimit_currency', $event)">
            <option value="$">$</option>
            <option value="￥">￥</option>
          </select>
          <input type="" placeholder="请输入内容" v-model="bpc_usedCreditLimit" @input="handleSimpleInput('bpc_usedCreditLimit', $event)">
        </el-col>
      </el-row>



      <el-row>
        <el-col :span="4">
          <p>
            Exportation service charge <br/> 出口服务费	
          </p>
        </el-col>
        <el-col :span="5">
          <input type="number" placeholder="请输入内容" v-model="bpc_serviceCharge" @input="handleTable1Input('bpc_serviceCharge', $event)">
          %
        </el-col>
        <el-col :span="3">
          <p>
            Interest <br/>利息
          </p>
        </el-col>
        <el-col :span="3">
          <input type="number" placeholder="请输入内容" v-model="bpc_interest" @input="handleTable1Input('bpc_interest', $event)">
          %
        </el-col>
        <el-col :span="3">
          <p>
            Tax refund rate <br/> 产品退税率
          </p>
        </el-col>
        <el-col :span="6">
          <input type="number" placeholder="请输入内容" v-model="bpc_taxRefundRate" @input="handleTable1Input('bpc_taxRefundRate', $event)">
          %
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="4">
          <p>
            Financial time <br/> 赊销服务时间（month）	
          </p>
        </el-col>
        <el-col :span="5">
          <input type="number" placeholder="请输入内容" v-model="bpc_finacialTime" @input="handleTable1Input('bpc_finacialTime', $event)">
        </el-col>
        <el-col :span="3">
          <p>
            Deposit <br/>定金
          </p>
        </el-col>
        <el-col :span="3">
          <input type="number" placeholder="请输入内容" v-model="bpc_deposit" @input="handleTable1Input('bpc_deposit', $event)">
          %
        </el-col>
        <el-col :span="3">
          <p>
            Balance <br/> 尾款
          </p>
        </el-col>
        <el-col :span="6">
          <input type="number" placeholder="请输入内容" v-model="bpc_balance" @input="handleTable1Input('bpc_balance', $event)">
          %
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="4">
          <p>
            This order financial amount <br/>本订单融资额度
          </p>
        </el-col>
        <el-col :span="5">
          <input type="number" placeholder="请输入内容" v-model="bpc_finacialAmount" @input="handleTable1Input('bpc_finacialAmount', $event)">
          %
        </el-col>

        <el-col :span="15">
          &nbsp;
        </el-col>

      </el-row>

    </div>

    <div class="table-2">
      <p class="title">Calcualtions of the price and the charges 费用明细	</p>


      <div class="table-rows">
        <el-row class="row-1">
          <el-col :span="1">币种<br/>选择</el-col>
          <el-col :span="4">Item</el-col>
          <el-col :span="4">Amount</el-col>
          <el-col :span="11">Calcualtion</el-col>
          <el-col :span="4">Note</el-col>
        </el-row>


        <el-row class="row-2">

          <div class="currency">
            <select  v-model="bpc_detail_currency1" @change="selectCurrency('bpc_detail_currency1', $event)">
              <option value="$">$</option>
              <option value="￥">￥</option>
              <option value="C$">C$</option>
              <option value="€">€</option>
            </select>
          </div>

          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="4">
            Factory Price with VAT <br/>工厂含税价
          </el-col>
          <el-col :span="4">
            <span>{{bpc_detail_currency1}}</span>
            <input type="number" v-model="bpc_item1Amount" @input="handleTable2Input('bpc_item1Amount', $event)"   placeholder="请输入内容">
          </el-col>
          <el-col :span="11">
              &nbsp;
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
        </el-row>


         <el-row class="row-3">
          <el-col :span="1">
            &nbsp;
          </el-col>

          <el-col :span="4">
            Tax refund <br/>退税
          </el-col>

          <el-col :span="4">
            <span>{{bpc_detail_currency1}}</span>
            <input type="number" v-model="bpc_item2Amount" @input="handleTable2Input('bpc_item2Amount', $event)"   placeholder="请输入内容">
          </el-col>
          <el-col :span="11" class="spec-row">
            <el-row>
              <el-col :span="8">
                <span>{{bpc_detail_currency1}}</span>
                <input type="number" @input="handleTable2Input('bpc_item2C1', $event)" class="spec-input"  v-model="bpc_item2C1"  placeholder="关联">
              </el-col>
              <el-col :span="1" class="spec-char">/</el-col>
              <el-col :span="6">
                <input type="number" v-model="bpc_item2C2" @input="handleTable2Input('bpc_item2C2', $event)"   placeholder="请输入内容">
              </el-col>
              <el-col :span="1" class="spec-char">*</el-col>
              <el-col :span="8" class="el-col--noright">
                <input type="number" class="spec-input"  @input="handleTable2Input('bpc_item2C3', $event)"  v-model="bpc_item2C3"   placeholder="关联">
                %
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
        </el-row>




        <el-row  class="row-4" >

          <el-col :span="1">
            <div class="currency">
              <select  v-model="bpc_detail_currency2" @change="selectCurrency('bpc_detail_currency2', $event)">
                <option value="$">$</option>
                <option value="￥">￥</option>
                <option value="C$">C$</option>
                <option value="€">€</option>
              </select>
            </div>
          </el-col>
          
          <el-col :span="4">
            original order amount after reduce the tax refund <br/>不含税价格
          </el-col>
          <el-col :span="4">
            <span>{{bpc_detail_currency2}}</span>
            <input type="number" v-model="bpc_item3Amount" @input="handleTable2Input('bpc_item3Amount', $event)"   placeholder="请输入内容">
          </el-col>
          <el-col :span="11">
              <el-row>
                <el-col :span="12">
                <span>{{bpc_detail_currency2}}</span>
                  <input type="tenumberxt"  v-model="bpc_item3C1" class="spec-input" @input="handleTable2Input('bpc_item3C1', $event)"   placeholder="关联">
                </el-col>
                <el-col :span="1" class="spec-char">
                  -
                </el-col>
                <el-col :span="11" class="el-col--noright">
                  <span>{{bpc_detail_currency2}}</span>
                  <input type="number"  v-model="bpc_item3C2"  @input="handleTable2Input('bpc_item3C2', $event)"   placeholder="关联">
                </el-col>
              </el-row>
          </el-col>
          <el-col :span="4">
            <textarea :readonly="true">price without tax</textarea>
          </el-col>
        </el-row>



        <el-row  class="row-5" >

          <el-col :span="1">
            <div class="currency">
              <select  v-model="bpc_detail_currency3" @change="selectCurrency('bpc_detail_currency3', $event)">
                <option value="$">$</option>
                <option value="￥">￥</option>
                <option value="C$">C$</option>
                <option value="€">€</option>
              </select>
            </div>
          </el-col>

          <el-col :span="4">
            Comission of TCF <br/>TCF 佣金
          </el-col>
          <el-col :span="4">
              <span>{{bpc_detail_currency3}}</span>
              <input type="number" v-model="bpc_item4Amount" @input="handleTable2Input('bpc_item4Amount', $event)"   placeholder="请输入内容">
          </el-col>
          <el-col :span="11">
              <el-row>
                <el-col :span="12">
                  <span>{{bpc_detail_currency3}}</span>
                  <input type="number"  v-model="bpc_item4C1" @input="handleTable2Input('bpc_item4C1', $event)"  placeholder="关联">
                </el-col>
                <el-col :span="1" class="spec-char">
                  *
                </el-col>
                <el-col :span="11" class="el-col--noright">
                  <input type="number"  v-model="bpc_item4C2" @input="handleTable2Input('bpc_item4C2', $event)"  class="spec-input"    placeholder="关联">
                  %
                </el-col>
              </el-row>
          </el-col>
          <el-col :span="4">
            <textarea placeholder="请输入内容" v-model="bpc_item4Note" @input="handleSimpleInput('bpc_item4Note', $event)" ></textarea>
          </el-col>
        </el-row>

        
        <el-row  class="row-6" >

          <el-col :span="1">
            &nbsp;
          </el-col>

          <el-col :span="4">
            Financial amount by TCF <br/>TCF 融资金额
          </el-col>
          <el-col :span="4">
              <span>{{bpc_detail_currency3}}</span>
              <input type="number" v-model="bpc_item5Amount" @input="handleTable2Input('bpc_item5Amount', $event)"   placeholder="请输入内容">
          </el-col>
          <el-col :span="11">
              <el-row>
                <el-col :span="12">
                  <span>{{bpc_detail_currency3}}</span>
                  <input type="number"  v-model="bpc_item5C1"  @input="handleTable2Input('bpc_item5C1', $event)"   placeholder="关联">
                </el-col>
                <el-col :span="1" class="spec-char">
                  *
                </el-col>
                <el-col :span="11" class="el-col--noright">
                  <input type="number"  v-model="bpc_item5C2" @input="handleTable2Input('bpc_item5C2', $event)"  class="spec-input"   placeholder="关联">
                  %
                </el-col>
              </el-row>
          </el-col>
          <el-col :span="4">
            <textarea placeholder="请输入内容" v-model="bpc_item5Note"  @input="handleTable2Input('bpc_item5Note', $event)"></textarea>
          </el-col>
        </el-row>




         <el-row class="row-7">

          <el-col :span="1">
            &nbsp;
          </el-col>

          <el-col :span="4">
            Financial interest <br/>TCF 融资利息
          </el-col>
          <el-col :span="4">
            <span>{{bpc_detail_currency3}}</span>
            <input type="number" v-model="bpc_item6Amount" @input="handleTable2Input('bpc_item6Amount', $event)"   placeholder="请输入内容">
          </el-col>
          <el-col :span="11">
            <el-row>
              <el-col :span="8">
                <span>{{bpc_detail_currency3}}</span>
                <input type="number"  v-model="bpc_item6C1" @input="handleTable2Input('bpc_item6C1', $event)" class="spec-input"   placeholder="关联">
              </el-col>
              <el-col :span="1" class="spec-char">*</el-col>
              <el-col :span="6">
                <input type="number"  v-model="bpc_item6C2" @input="handleTable2Input('bpc_item6C2', $event)"   class="spec-input" placeholder="关联">
                 %
              </el-col>
              <el-col :span="1" class="spec-char">*</el-col>
              <el-col :span="8" class="el-col--noright">
                <input type="number"  v-model="bpc_item6C3" @input="handleTable2Input('bpc_item6C3', $event)" placeholder="关联">
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <textarea placeholder="请输入内容" v-model="bpc_item6Note" @input="handleSimpleInput('bpc_item6Note', $event)"></textarea>
          </el-col>
        </el-row>


         <el-row  class="row-8" >

          <el-col :span="1">
            &nbsp;
          </el-col>

          <el-col :span="4">
            Total Service charge of TCF <br/>TCF 总服务费用	
          </el-col>
          <el-col :span="4">
             <span>{{bpc_detail_currency3}}</span>
             <input type="number" v-model="bpc_item7Amount" @input="handleTable2Input('bpc_item7Amount', $event)" placeholder="请输入内容">
          </el-col>
          <el-col :span="11">
              <el-row>
                <el-col :span="12">
                   <span>{{bpc_detail_currency3}}</span>
                   <input type="number"  v-model="bpc_item7C1" @input="handleTable2Input('bpc_item7C1', $event)"  placeholder="关联">
                </el-col>
                <el-col :span="1" class="spec-char">
                  +
                </el-col>
                <el-col :span="11" class="el-col--noright">
                   <span>{{bpc_detail_currency3}}</span>
                   <input type="number"   v-model="bpc_item7C2" @input="handleTable2Input('bpc_item7C2', $event)"   placeholder="关联">
                </el-col>
              </el-row>
          </el-col>
          <el-col :span="4">
            &nbsp;
          </el-col>
        </el-row>


        <el-row class="row-9">
          <el-col :span="24">
            Sales contract(Overseas buyer pay to TCF) 外贸合同（海外买家合同付款）							
          </el-col>
        </el-row>
       
        
        <el-row  class="row-10" >

          <el-col :span="1">
            <div class="currency">
             <select  v-model="bpc_detail_currency4" @change="selectCurrency('bpc_detail_currency4', $event)">
                <option value="$">$</option>
                <option value="￥">￥</option>
                <option value="C$">C$</option>
                <option value="€">€</option>
              </select>
            </div>
          </el-col>

          <el-col :span="4">
            Sales contract amount <br/>外贸合同总金额
          </el-col>
          <el-col :span="4">
              <span>{{bpc_detail_currency4}}</span>
              <input type="number" v-model="bpc_item8Amount" @input="handleTable2Input('bpc_item8Amount', $event)" placeholder="请输入内容">
          </el-col>
          <el-col :span="11">
              <el-row>
                <el-col :span="12">
                <span>{{bpc_detail_currency4}}</span>
                 <input type="number"  v-model="bpc_item8C1" @input="handleTable2Input('bpc_item8C1', $event)" placeholder="关联">
                </el-col>
                <el-col :span="1" class="spec-char">
                  +
                </el-col>
                <el-col :span="11" class="el-col--noright">
                  <span>{{bpc_detail_currency4}}</span>
                  <input type="number"  v-model="bpc_item8C2" @input="handleTable2Input('bpc_item8C2', $event)" placeholder="关联">
                </el-col>
              </el-row>
          </el-col>
          <el-col :span="4">
              <textarea placeholder="请输入内容" v-model="bpc_item8Note" @input="handleSimpleInput('bpc_item8Note', $event)">Buyer pays USD to TCF;海外买家美金付款</textarea>
          </el-col>
        </el-row>

        <el-row class="row-11">
          <el-col :span="1">&nbsp;</el-col>

          <el-col :span="4">
            Deposit <br/>定金
          </el-col>
          <el-col :span="4">
              <span>{{bpc_detail_currency4}}</span>
              <input type="number" v-model="bpc_item9Amount" @input="handleTable2Input('bpc_item9Amount', $event)" placeholder="请输入内容">
          </el-col>
          <el-col :span="11">
            <el-row>
              <el-col :span="8">
                <span>{{bpc_detail_currency4}}</span>
                <input type="number"  v-model="bpc_item9C1" class="spec-input" @input="handleTable2Input('bpc_item9C1', $event)"  placeholder="关联">
              </el-col>
              <el-col :span="1" class="spec-char">*</el-col>
              <el-col :span="6">
                <input type="number"  class="spec-input" v-model="bpc_item9C2"  @input="handleTable2Input('bpc_item9C2', $event)" placeholder="关联"/>
                %
              </el-col>
              <el-col :span="1" class="spec-char">+</el-col>
              <el-col :span="8" class="el-col--noright">
                <span>{{bpc_detail_currency4}}</span>
                <input type="number"  class="spec-input" v-model="bpc_item9C3" @input="handleTable2Input('bpc_item9C3', $event)" placeholder="关联"/>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
              <textarea placeholder="请输入内容" :readonly="true" >buyer should pay before production;海外买家生产前支付定金，包含服务费;</textarea>
          </el-col>
        </el-row>



        <el-row class="row-12">

          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="4">
            Balance pay to TCF <br/>尾款
          </el-col>
          <el-col :span="4">
            <span>{{bpc_detail_currency4}}</span>
            <input type="number"  v-model="bpc_item10Amount"  @input="handleTable2Input('bpc_item10Amount', $event)" placeholder="关联"/>
          </el-col>
          <el-col :span="11">
            &nbsp;
          </el-col>
          <el-col :span="4">
            <textarea placeholder="请输入内容" v-model="bpc_item10Note"  @input="handleSimpleInput('bpc_item10Note', $event)" ></textarea>
          </el-col>
        </el-row>



        <el-row  class="row-13" >

          <el-col :span="1">
            <div class="currency">
              <select  v-model="bpc_detail_currency5" @change="selectCurrency('bpc_detail_currency5', $event)">
                <option value="$">$</option>
                <option value="￥">￥</option>
                <option value="C$">C$</option>
                <option value="€">€</option>
              </select>
            </div>
          </el-col>

          <el-col :span="4">
            Warranty money <br/>保证金
          </el-col>
          <el-col :span="4"> 
            <span>{{bpc_detail_currency5}}</span>
            <input type="number" @input="handleTable2Input('bpc_item11Amount', $event)"  v-model="bpc_item11Amount" placeholder="请输入内容"/>
          </el-col>
          <el-col :span="11">
              <el-row>
                <el-col :span="12">
                  <span>{{bpc_detail_currency5}}</span>
                  <input type="number"  v-model="bpc_item11C1" @input="handleTable2Input('bpc_item11C1', $event)"  placeholder="关联"/>
                </el-col>
                <el-col :span="1" class="spec-char">
                  *
                </el-col>
                <el-col :span="11" class="el-col--noright">
                  <input type="number"  v-model="bpc_item11C2" @input="handleTable2Input('bpc_item11C2', $event)" placeholder="关联"/>
                </el-col>
              </el-row>
          </el-col>
          <el-col :span="4">
            <textarea placeholder="请输入内容" :readonly="true">should pay before shipping, will return back after finish the order,pay USD;发货前支付保证金，美金付款；</textarea>
          </el-col>
        </el-row>


        <el-row class="row-14">
          <el-col :span="24">
            Purchase contract （TCF pay to factory）采购合同金额										
          </el-col>
        </el-row>


        <el-row class="row-15">
          <el-col :span="1">
            <div class="currency">
              <select  v-model="bpc_detail_currency6" @change="selectCurrency('bpc_detail_currency6', $event)">
                <option value="$">$</option>
                <option value="￥">￥</option>
                <option value="C$">C$</option>
                <option value="€">€</option>
              </select>
            </div>
          </el-col>

          <el-col :span="4">
           Purchase contract amount <br/>采购合同总额
          </el-col>
          <el-col :span="4">
              <span>{{bpc_detail_currency6}}</span>
              <input type="number"  v-model="bpc_item12Amount" @input="handleTable2Input('bpc_item12Amount', $event)" placeholder="关联"/>
          </el-col>
          <el-col :span="11">
            &nbsp;
          </el-col>
          <el-col :span="4">
            <textarea placeholder="请输入内容" :readonly="true">TCF pay RMB to factory;人民币付款</textarea>
          </el-col>
        </el-row>


         <el-row  class="row-16" >

          <el-col :span="1">&nbsp;</el-col>

          <el-col :span="4">
            deposit <br/> 定金
          </el-col>
          <el-col :span="4">
              <span>{{bpc_detail_currency6}}</span>
              <input type="number"  @input="handleTable2Input('bpc_item13Amount', $event)"  v-model="bpc_item13Amount" placeholder="请输入内容"/>
          </el-col>
          <el-col :span="11">
              <el-row>
                <el-col :span="12">
                <span>{{bpc_detail_currency6}}</span>
                <input type="number" v-model="bpc_item13C1"  @input="handleTable2Input('bpc_item13C1', $event)"  placeholder="关联"/>
                </el-col>
                <el-col :span="1" class="spec-char">
                  *
                </el-col>
                <el-col :span="11" class="el-col--noright">
                  <input type="number"  class="spec-input"  v-model="bpc_item13C2" @input="handleTable2Input('bpc_item13C2', $event)"  placeholder="关联"/>
                  %
                </el-col>
              </el-row>
          </el-col>
          <el-col :span="4">
            <textarea placeholder="请输入内容" v-model="bpc_item13Note"  @input="handleSimpleInput('bpc_item13Note', $event)"></textarea>
          </el-col>
        </el-row>


         <el-row  class="row-17" >
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="4">
            balance <br/> 尾款
          </el-col>
          <el-col :span="4">
              <span>{{bpc_detail_currency6}}</span>
              <input type="number" @input="handleTable2Input('bpc_item14Amount', $event)"   v-model="bpc_item14Amount" placeholder="请输入内容"/>
          </el-col>

          <el-col :span="11">
              <el-row>
                <el-col :span="12">
                  <span>{{bpc_detail_currency6}}</span>
                  <input type="number" v-model="bpc_item14C1" @input="handleTable2Input('bpc_item14C1', $event)"   placeholder="关联"/>
                </el-col>
                <el-col :span="1" class="spec-char">
                  -
                </el-col>
                <el-col :span="11" class="el-col--noright">
                  <span>{{bpc_detail_currency6}}</span>
                  <input type="number"  v-model="bpc_item14C2" @input="handleTable2Input('bpc_item14C2', $event)"    placeholder="关联"/>
                </el-col>
              </el-row>
          </el-col>

          <el-col :span="4">
            <textarea placeholder="请输入内容" v-model="bpc_item14Note"   @input="handleSimpleInput('bpc_item14Note', $event)"></textarea>
          </el-col>
        </el-row>


      </div>

    </div>


    <div class="table-3">
        <el-table :data="bpc_table1"   border style="width: 100%">
            <el-table-column type="index" label="Item" :index="indexMethod"></el-table-column>

            <el-table-column prop="bpc_table1_products" label="Products" min-width="100">
                <template slot-scope="scope">
                <span  class="cell-edit-input">
                    <input  placeholder="请输入相关内容" @input="handleTableI3nput(scope, 'bpc_table1_products', $event)"    :readonly="!editable"  v-model="scope.row.bpc_table1_products" />
                </span>
                </template>
            </el-table-column>

            <el-table-column prop="bpc_table1_hscode"  label="HS Code" min-width="100">
                <template slot-scope="scope">
                <span  class="cell-edit-input">
                    <input  placeholder="请输入相关内容" @input="handleTableI3nput(scope, 'bpc_table1_hscode', $event)"    :readonly="!editable"  v-model="scope.row.bpc_table1_hscode" />
                </span>
                </template>
            </el-table-column>

            <el-table-column prop="bpc_table1_taxrate"  label="Tax refund rate" min-width="100">
                <template slot-scope="scope">
                <span  class="cell-edit-input">
                    <input class="spec-input"  placeholder="请输入相关内容" @input="handleTableI3nput(scope, 'bpc_table1_taxrate', $event)"    :readonly="!editable"  v-model="scope.row.bpc_table1_taxrate" />
                    %
                </span>
                </template>
            </el-table-column>

            <el-table-column
            v-if="editable"
            label="操作"
            width="100">
            <template slot-scope="scope">
            <el-button @click="addNewLine(scope.$index, bpc_table1)" type="text" size="small">添加</el-button>
            <el-button @click="removeCurrentLine(scope.$index, bpc_table1)" type="text" size="small">移除</el-button>
            </template>
        </el-table-column>

        </el-table>
    </div>


    <div class="other">
        <el-row class="other-time">
            <el-col :span="8">
                <p>4. Estimated delivery time 预计发货时间：</p>
            </el-col>
            <el-col :span="5">
                 <el-date-picker  value-format="yyyy-MM-dd" :disabled="!editable" @change="selectDate"   v-model="bpc_deliveryTime" ></el-date-picker>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="8">
                <p>5. Shipping（by sea/by air/by railway/by land）:</p>
            </el-col>
            <el-col :span="5">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_shipping', $event)" v-model="bpc_shipping" />
            </el-col>
        </el-row>

        <p> 6. Shipping agent contact information 货运代理信息</p>

        <el-row>
            <el-col :span="3">
               <span> Company:</span>
             </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_agentCompany', $event)" v-model="bpc_agentCompany" />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="3">
                <span>Contact to:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_agentContactTo', $event)" v-model="bpc_agentContactTo" />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="3">
                <span>Email:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_agentEmail', $event)" v-model="bpc_agentEmail" />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="3">
                <span>Mobile:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_agentMobile', $event)" v-model="bpc_agentMobile" />
            </el-col>
        </el-row>

        <p>
            7. Bank informaiton of warranty money payment:
        </p>

        <el-row>
            <el-col :span="5">
                <span>Beneficiary:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_beneficiary', $event)" v-model="bpc_beneficiary" />
            </el-col>
        </el-row>

         <el-row>
            <el-col :span="5">
                <span>Company Address:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_companyAddress', $event)" v-model="bpc_companyAddress" />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>Beneficiary Bank Name:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_beneficiaryBankName', $event)" v-model="bpc_beneficiaryBankName" />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>Bank Address:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_bankAddress', $event)" v-model="bpc_bankAddress" />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>SWIFT BIC:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_swiftBic', $event)" v-model="bpc_swiftBic" />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>Bank Account:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" @input="handleSimpleInput('bpc_bankAccount', $event)" v-model="bpc_bankAccount" />
            </el-col>
        </el-row>

    </div>

  
  
  <div class="upload">
    <p class="upload-hint">票据/附件</p>
    <div>
      <div class="upload-btn">
        <input  type="file"  v-show="editable"  name="file" multiple @change="selectFiles" >
        <el-button :disabled="!editable" type="primary">选择附件</el-button>
      </div>


      <ul class="upload-files">
        <li @mouseover="handleOver(item)" :key="index"   @mouseout="handleOut(item)" v-for="(item,index) in attachedFiles">
          <span @click="download(item.id, $event)">{{item.name}}</span>
          <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
          <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
        </li>
      </ul>
    </div>
  </div>

</div>

</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js';
import {toFixed, toFixedRound} from '@/util/transform.js';
import {handleEmit} from '../common.js';
import exportExcel from '../../common/exportExcel.vue';

export default {

  created(){
    
    const self = this;

    this.keys.forEach(key => {
       this[key] = _.cloneDeep(this.datas[key]);
     });

    
    this.bus.$on("profitcalculation-buyer-mesg", function(arg){
      self.bpc_buyerName = arg[0].bf_buy_name;
      self.bpc_buyerAddress = arg[0].bf_buy_address;
      self.bpc_no = arg[0].bf_orderNumber;
      self.emitToParent();
    });

    this.bus.$on("profitcalculation-date", function(arg){
      self.bpc_date = arg[0];
      self.emitToParent();
    });

    this.bus.$on("profitcalculation-order-number", function(arg){
      self.bpc_no = arg[0];
      self.emitToParent();
    });


    this.bus.$on("profitcalculation-buyer-address", function(arg){
      self.bpc_buyerAddress = arg[0];
      self.emitToParent();
    });

    //接收外贸合同的表格的添加，删除
    this.bus.$on("profitcalculation-table", function(arg){

      let index = arg[1];
      let srcData = arg[2];

      if (arg[0] === 'add') {
        //添加

        let  data = {
            bpc_table1_products: srcData.bf_table1_product,
            bpc_table1_hscode: '',
            bpc_table1_taxrate: 0
        }; 

        if ((index - self.bpc_table1.length) >= 1) {
          self.bpc_table1.push(data);
        } else {
          self.bpc_table1.splice(index, 0, data);
        }

      } else if(arg[0] === 'delete'){
        //删除
        if (self.bpc_table1.length - 1 >= index) {
          self.bpc_table1.splice(index, 1);
        }
      }

       self.emitToParent();
    });


    //接收外贸合同的表格输入变化

    this.bus.$on("profitcalculation-table-line", function(arg){

      let lineIndex = arg[0], key = arg[1];
      let srcData = arg[2];

      if (key === 'bf_table1_product'){
        if (lineIndex  <= (self.bpc_table1.length - 1)){
            let temp = _.cloneDeep(self.bpc_table1[lineIndex]);
            temp['bpc_table1_products'] = srcData;
            self.bpc_table1.splice(lineIndex, 1, temp);
            self.emitToParent();
        }
      }
    });

  },
  methods: {

     /**
     * 数据发生改变时，通知父组件
     */
    emitToParent(){
      let newData = {};
      this.keys.forEach(key => {
        newData[key] = _.cloneDeep(this[key]);
      });
      this.$emit("fromPC", "businessform_profitcalculation", newData);
    },

     /**
     *  数据更新之后 通知需要关联的组件
     * @param {String} eventName
     * @param {String} option
     * @param {Array} value
     */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },

     /**
     * 处理其他 input  输入
     */
    handleSimpleInput(key, event){
      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },

    /**
     * 处理表格一的输入
     */
    handleTable1Input(key, event){

        let temp;

        switch(key){
            case 'bpc_paymentRisk':
              if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
                temp=  event.target.value;
              } else {
                temp =  toFixed(event.target.value);
              }
            
             this.bpc_paymentRisk = temp;
             this.bpc_item11C2 = temp;
             this.computeLineAmount('bpc_item11Amount');
            break;
            
            case 'bpc_serviceCharge':
              if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
                temp=  event.target.value;
              } else {
                temp =  toFixed(event.target.value);
              }
             this.bpc_serviceCharge = temp;
             this.bpc_item4C2 = temp;
             this.computeLineAmount('bpc_item4Amount');
            break;

            case 'bpc_interest':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
               temp=  event.target.value;
            } else {
               temp =  toFixed(event.target.value);
            }
            this.bpc_interest = temp;
            this.bpc_item6C2 = temp;
            this.computeLineAmount('bpc_item6Amount');
            break;

            case 'bpc_taxRefundRate':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
               temp=  event.target.value;
            } else {
               temp =  toFixed(event.target.value);
            }
            this.bpc_taxRefundRate = temp;
            this.bpc_item2C3 = temp;
            this.computeLineAmount('bpc_item2Amount');
            break;

            case 'bpc_finacialTime':
            this.bpc_item6C3 = event.target.value;
            this.computeLineAmount('bpc_item6Amount');
            break;

            case 'bpc_deposit':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
               temp=  event.target.value;
            } else {
               temp =  toFixed(event.target.value);
            }
            this.bpc_deposit = temp;
            this.bpc_item9C2 = temp;
            this.bpc_item13C2 = temp;
            this.computeLineAmount('bpc_item9Amount');
            this.computeLineAmount('bpc_item13Amount');
            break;

            case 'bpc_balance':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
               temp=  event.target.value;
            } else {
               temp =  toFixed(event.target.value);
            }
            this.bpc_balance = temp;
            break;           

            case 'bpc_finacialAmount':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
               temp=  event.target.value;
            } else {
               temp =  toFixed(event.target.value);
            }
            this.bpc_finacialAmount = temp;
            this.bpc_item5C2 = temp;
            this.computeLineAmount('bpc_item5Amount');
            break;
        }
    },

    /**
     * 表格2中每行的 值计算
     */
    computeLineAmount(key){
        let total;

        switch(key){
            //tax refound
            case 'bpc_item2Amount':
            total = Number(this.bpc_item2C1) / Number(this.bpc_item2C2) * Number(this.bpc_item2C3) / 100 ;
            this.bpc_item2Amount = this.handleTotalIsNaN(total);
            this.bpc_item3C2 = this.bpc_item2Amount;
            this.computeLineAmount('bpc_item3Amount');
            break;

            //original order amount after reduce the tax refun
            case 'bpc_item3Amount':
            total = Number(this.bpc_item3C1) -  Number(this.bpc_item3C2) ;
            this.bpc_item3Amount = this.handleTotalIsNaN(total);
            this.bpc_item5C1 = this.bpc_item3Amount;
            this.computeLineAmount('bpc_item5Amount');

            this.bpc_item9C1 = this.bpc_item3Amount ;
            this.computeLineAmount('bpc_item9Amount');
            break;

            //Comission of TCF
            case 'bpc_item4Amount':
            total = Number(this.bpc_item4C1) * Number(this.bpc_item4C2) / 100 ;
            this.bpc_item4Amount = this.handleTotalIsNaN(total);
            this.bpc_item7C1 = this.bpc_item4Amount;
            this.computeLineAmount('bpc_item7Amount');
            break;
            

            //Financial amount by TC
            case 'bpc_item5Amount':
            total = Number(this.bpc_item5C1) * Number(this.bpc_item5C2) / 100 ;
            this.bpc_item5Amount = this.handleTotalIsNaN(total);
            this.bpc_item6C1 = this.bpc_item5Amount;
            this.computeLineAmount("bpc_item6Amount");

            this.bpc_item10Amount = this.bpc_item5Amount;
            this.bpc_item8C2 = this.bpc_item5Amount;
            this.computeLineAmount('bpc_item8Amount');

            this.bpc_item11C1 = this.bpc_item5Amount ;
            this.computeLineAmount('bpc_item11Amount');

            break;

            //Financial interest
            case 'bpc_item6Amount':
            total = Number(this.bpc_item6C1) * Number(this.bpc_item6C2) * Number(this.bpc_item6C3) / 100 ;
            this.bpc_item6Amount = this.handleTotalIsNaN(total);
            this.bpc_item7C2 = this.bpc_item6Amount ;
            this.computeLineAmount('bpc_item7Amount');
            break;

            //Total Service charge of TCF
            case 'bpc_item7Amount':
            total = Number(this.bpc_item7C1) +  Number(this.bpc_item7C2) ;
            this.bpc_item7Amount = this.handleTotalIsNaN(total);
            this.bpc_item9C3 = this.bpc_item7Amount;
            this.computeLineAmount('bpc_item9Amount');
            break;


            //Sales contract amount
            case 'bpc_item8Amount':
            total = Number(this.bpc_item8C1) +  Number(this.bpc_item8C2)  ;
            this.bpc_item8Amount = this.handleTotalIsNaN(total);
            break;
            
            

            //Deposit
            case 'bpc_item9Amount':
            total = Number(this.bpc_item9C1) * Number(this.bpc_item9C2) / 100  +  Number(this.bpc_item9C3);
            this.bpc_item9Amount = this.handleTotalIsNaN(total);
            this.bpc_item8C1 = this.bpc_item9Amount;
            this.computeLineAmount('bpc_item8Amount');
            break;

            //Warranty money
            case 'bpc_item11Amount':
            total = Number(this.bpc_item11C1) * Number(this.bpc_item11C2) / 100 ;
            this.bpc_item11Amount = this.handleTotalIsNaN(total);
            this.emitToNext("deposit-table-first",this.bpc_item11Amount );
            break;


            case 'bpc_item12Amount':
             this.bpc_item13C1 = this.bpc_item12Amount;
             this.bpc_item14C1 = this.bpc_item12Amount;
             this.computeLineAmount('bpc_item13Amount');
            break;

            // deposit
            case 'bpc_item13Amount':
            total = Number(this.bpc_item13C1) * Number(this.bpc_item13C2) / 100 ;
            this.bpc_item13Amount = this.handleTotalIsNaN(total);
            this.bpc_item14C2 = this.bpc_item13Amount ;
            this.computeLineAmount('bpc_item14Amount');
            break;

            // Balance
            case 'bpc_item14Amount':
            total = Number(this.bpc_item14C1) -  Number(this.bpc_item14C2);
            this.bpc_item14Amount = this.handleTotalIsNaN(total);
            break;

        }

        handleEmit(null, () => {
            this.emitToParent();
        });
    },

    handleTotalIsNaN(value){
        if (Number.isNaN(value)){
            return '';
        } else {
            return toFixedRound(value);
        }
    },


    /**
     *  处理表格2，有关联和计算的输入控制函数
     */
    handleTable2Input(key, event){
        let temp;
        if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
          temp=  event.target.value;
        } else {
          temp =  toFixed(event.target.value);
        }
        
        switch(key) {

            case 'bpc_item1Amount' :
            this.bpc_item2C1 = temp;
            this.computeLineAmount('bpc_item2Amount');

            this.bpc_item3C1 = temp;
            this.computeLineAmount('bpc_item3Amount');
            
            this.bpc_item4C1 = temp;
            this.computeLineAmount('bpc_item4Amount');

            this.bpc_item12Amount = temp;
            this.computeLineAmount('bpc_item12Amount');
            break;

            case 'bpc_item2Amount':
            this.bpc_item3C2 = temp;
            this.computeLineAmount("bpc_item3Amount");
            break;

            case 'bpc_item2C1' || 'bpc_item2C2' || 'bpc_item2C3':
            this.computeLineAmount("bpc_item2Amount");
            break;

            case 'bpc_item3Amount':
            this.bpc_item5C1 = temp;
            this.bpc_item9C1 = temp;
            this.computeLineAmount('bpc_item5Amount');
            this.computeLineAmount('bpc_item9Amount');
            break;


            case 'bpc_item3C1' || 'bpc_item3C1':
            this.computeLineAmount('bpc_item3Amount');
            break;


            case 'bpc_item4Amount':
            this.bpc_item7C1 = temp; 
            this.computeLineAmount('bpc_item7Amount');
            break;

            case 'bpc_item4C1' || 'bpc_item4C2':
            this.computeLineAmount('bpc_item4Amount');
            break;

            case 'bpc_item5Amount':
            this.bpc_item6C1 = temp;
            this.bpc_item11C1 = temp;
            this.computeLineAmount('bpc_item6Amount');
            this.computeLineAmount('bpc_item11Amount');

            this.bpc_item10Amount = temp;
            this.bpc_item8C2 = this.bpc_item10Amount;
            this.computeLineAmount('bpc_item8Amount');
            break;


            case 'bpc_item5C1' || 'bpc_item5C1':
            this.computeLineAmount('bpc_item5Amount');
            break;

            case 'bpc_item6Amount':
            this.emitToParent();
            break;

            case 'bpc_item6C1' || 'bpc_item6C1' || 'bpc_item6C1':
            this.computeLineAmount('bpc_item6Amount');
            break;


            case 'bpc_item7Amount':
            this.bpc_item9C3 = temp;
            this.computeLineAmount('bpc_item9Amount');
            break;

            case 'bpc_item7C1' || 'bpc_item7C2':
            this.computeLineAmount('bpc_item9Amount');
            break;

            case 'bpc_item8Amount':
            this.emitToParent();
            break;

            case 'bpc_item8C1' || 'bpc_item8C2':
            this.computeLineAmount('bpc_item8Amount');
            break;


            case 'bpc_item9Amount':
            this.bpc_item8C1 = temp;
            this.computeLineAmount('bpc_item8Amount');
            break;

            case 'bpc_item9C1' || 'bpc_item9C2' || 'bpc_item9C3':
            this.computeLineAmount('bpc_item9Amount');
            break;


            case 'bpc_item10Amount':
            this.bpc_item8C2 = temp;
            this.computeLineAmount('bpc_item8Amount');
            break;

            case 'bpc_item11Amount':
            this.emitToParent();
            this.emitToNext("deposit-table-first",this.bpc_item11Amount);
            break;

            case 'bpc_item11C1' || 'bpc_item11C2':
            this.computeLineAmount('bpc_item11Amount');
            break;


            case 'bpc_item12Amount':
            this.bpc_item13C1 = temp;
            this.bpc_item14C1 = temp;
            this.computeLineAmount('bpc_item13Amount');
            this.computeLineAmount('bpc_item14Amount');
            break;

            case 'bpc_item13Amount':
            this.bpc_item14C2 = temp;
            this.computeLineAmount('bpc_item14Amount');
            break;

            case 'bpc_item13C1' || 'bpc_item13C2':
            this.computeLineAmount('bpc_item13Amount');
            break;

            case 'bpc_item14Amount':
            this.emitToParent();
            break;

            case 'bpc_item14C1' || 'bpc_item14C2':
            this.computeLineAmount('bpc_item14Amount');
            break;
        }
    },

    /**
     * 关联的外贸合同表格的修改
     */
    handleTableI3nput(scope, key, event){
        handleEmit(null, () => {
            this.emitToParent();
        });
    },

    selectDate(value){
      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },


    /**
     * 选择币种
     */
    selectCurrency(name, event){
      this.emitToParent();
    },


    indexMethod(index) {
      let lines = this.bpc_table1.length;
      return index + 1;
    },

    selectFiles(event){
      //票据附件
      let self = this;

      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
          self.emitToParent();
        });
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
          this.emitToParent();
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },

    addNewLine(currentIndex, table){
      
      let keys = [
          "bpc_table1_products",
          "bpc_table1_hscode",
          "bpc_table1_taxrate"
      ];
      let lastLine = _.cloneDeep(table[currentIndex]), newLine = {};

      keys.forEach(key => {
          newLine[key] = lastLine[key];
      });
      table.splice(currentIndex + 1, 0, newLine);

      this.emitToParent();
    },
    removeCurrentLine(currentIndex, table){

      if (table.length > 1){
        table.splice(currentIndex, 1);
        this.emitToParent();
      }
    },
    spanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      let lines = this.data.bpc_table1.length;
      if (lines - 1 === rowIndex) {
        switch (columnIndex) {
          case 0:
            return [1, 5];
            break;
          case 1:
          case 2:
          case 3:
          case 4:
          case 6:
          case 8:
          return [0, 0];
          case 5:
          case 7:
          return [1, 2];
        }
      }
    },
        /**选择币种 */
    currencySel(name){
       return (h, {column, $index}) => {
        let self = this;

       var selAttr = {};
       if (!this.editable){
         selAttr.disabled = 'disabled';
       }
        return  h("div", {
          attrs:  {
            class: "select-currency"
          }
        }, [
          h("span", name),
          h("select", {
            attrs: {...selAttr},
            domProps: {
            value: self.currencyValue
          },
          on: {
            change: function(event){
              self.currencyValue = event.target.value;
              self.data.bpc_currencyValue = event.target.value;
            }
          }
          },[
            h("option", "人民币"),
            h("option", "美元"),
            h("option", "加元"),
            h("option", "欧元"),
          ])
        ]);
      }
    }
  },

  mounted(){
  },

  updated(){

  },

  watch: {
      datas(newValue, oldValue){
          this.keys.forEach(key => {
              this[key] = _.cloneDeep(newValue[key]);
          });
      }
  },

  props: {
    businessformNO: {
      type: String,
      required: true
    },
    datas: {
      type: Object,
      required: true
    },
    bus: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      
        id: '',
        formInstId: '',
        attachedFiles: [], //票据附件
        bpc_no: '', //编号

        bpc_date: '', //日期
        bpc_buyerName: '',
        bpc_buyerAddress: '',

        bpc_buyerCreditLimt: '',
        bpc_paymentRisk: '',
        bpc_usedCreditLimit: '',
        bpc_serviceCharge:'',
        bpc_interest: '',
        bpc_taxRefundRate: '',
        bpc_finacialTime: '',
        bpc_deposit: '',
        bpc_balance: '',
        bpc_finacialAmount: '',

        bpc_usedCreditLimit_currency:'$',
        bpc_detail_currency1: '￥' ,
        bpc_detail_currency2: '￥',
        bpc_detail_currency3: '￥',
        bpc_detail_currency4: '￥',
        bpc_detail_currency5: '￥',
        bpc_detail_currency6: '￥',

        //Factory Price with VAT 
        bpc_item1Amount: '',


        //Tax refund 
        bpc_item2Amount: '',
        bpc_item2C1: '',
        bpc_item2C2: '1.16',
        bpc_item2C3: '',

        
        // original order amount after reduce the tax refund
        bpc_item3Amount: '',
        bpc_item3C1: '',
        bpc_item3C2: '',


        //Comission of TCF
        bpc_item4Amount: '',
        bpc_item4C1: '',
        bpc_item4C2: '',
        bpc_item4Note: 'TCF service charge 2.2% of order amount',

        //Financial amount by TCF
        bpc_item5Amount: '',
        bpc_item5C1: '',
        bpc_item5C2: '',
        bpc_item5Note: 'TCF offer 90 days of finance with 80% of the order amount',


        // Financial interest 
        bpc_item6Amount: '',
        bpc_item6C1: '',
        bpc_item6C2: '',
        bpc_item6C3: '',
        bpc_item6Note: 'Charge 1.5% each month, with in total 3 months',

        // Total Service charge of TCF
        bpc_item7Amount: '',
        bpc_item7C1: '',
        bpc_item7C2: '',
        
        // Sales contract amount 
        bpc_item8Amount: '',
        bpc_item8C1: '',
        bpc_item8C2: '',
        bpc_item8Note: '',


        //Deposit
        bpc_item9Amount: '',
        bpc_item9C1: '',
        bpc_item9C2: '',
        bpc_item9C3: '',

        // Balance pay to TCF
        bpc_item10Amount: '',
        bpc_item10Note: 'Overseas buyer should pay in 90 days;海外买家90天付款期限',

        //Warranty money
        bpc_item11Amount: '',
        bpc_item11C1: '',
        bpc_item11C2: '',


        // Purchase contract amount
        bpc_item12Amount: '',

        // deposit
        bpc_item13Amount: '',
        bpc_item13C1: '',
        bpc_item13C2: '',
        bpc_item13Note: 'TCF pay 20% deposit to factory 工厂定金支付20%',


        // Balance
        bpc_item14Amount: '',
        bpc_item14C1: '',
        bpc_item14C2: '',
        bpc_item14Note: 'TCF will pay 80% before delivery工厂尾款支付80%',

        bpc_table1: [{
            bpc_table1_products: '',
            bpc_table1_hscode: '',
            bpc_table1_taxrate: 0
        }],

        bpc_deliveryTime: '', //发货时间
        bpc_shipping: '',//
        bpc_agentCompany: '',
        bpc_agentContactTo: '',
        bpc_agentEmail: '',
        bpc_agentMobile: '',


        bpc_beneficiary: 'BIZOE INTERNATIONAL GROUP LIMITED',
        bpc_companyAddress: 'UNIT 04,7/F BRIGHT WAY TOWER NO.33 MONG KOK RD KL',
        bpc_beneficiaryBankName: 'CHINA ZHESHANG BANK BEIJING BRANCH',
        bpc_bankAccount:'NRA1000000011420100046799',
        bpc_bankAddress: 'NO.1 FINANCIAL STEREET,XICHENG DISTRICT,BEIJING,CHINA',
        bpc_swiftBic:'ZJCBCN2N',

        keys: [
         "id",
         "formInstId",
        'attachedFiles',
        'bpc_no',
        'bpc_date',
        'bpc_buyerName',
        'bpc_buyerAddress',
        'bpc_buyerCreditLimt',
        'bpc_paymentRisk',
        'bpc_usedCreditLimit',
        'bpc_serviceCharge',
        'bpc_interest',
        'bpc_taxRefundRate',
        'bpc_finacialTime',
        'bpc_deposit',
        'bpc_balance',
        'bpc_finacialAmount',
        'bpc_item1Amount',
        'bpc_item2Amount',
        'bpc_item2C1',
        'bpc_item2C2',
        'bpc_item2C3',
        'bpc_item3Amount',
        'bpc_item3C1',
        'bpc_item3C2',
        'bpc_item4Amount',
        'bpc_item4C1',
        'bpc_item4C2',
        'bpc_item4Note' ,
        'bpc_item5Amount',
        'bpc_item5C1',
        'bpc_item5C2',
        'bpc_item5Note',
        'bpc_item6Amount',
        'bpc_item6C1',
        'bpc_item6C2',
        'bpc_item6C3',
        'bpc_item6Note',
        'bpc_item7Amount',
        'bpc_item7C1',
        'bpc_item7C2',
        'bpc_item8Amount',
        'bpc_item8C1',
        'bpc_item8C2',
        'bpc_item8Note',
        'bpc_item9Amount',
        'bpc_item9C1',
        'bpc_item9C2',
        'bpc_item9C3',
        'bpc_item10Amount',
        'bpc_item10Note',
        'bpc_item11Amount',
        'bpc_item11C1',
        'bpc_item11C2',
        'bpc_item12Amount',
        'bpc_item13Amount',
        'bpc_item13C1',
        'bpc_item13C2',
        'bpc_item13Note',
        'bpc_item14Amount',
        'bpc_item14C1',
        'bpc_item14C2',
        'bpc_item14Note',
        'bpc_table1',
        'bpc_deliveryTime',
        'bpc_shipping' ,
        'bpc_agentCompany',
        'bpc_agentContactTo',
        'bpc_agentEmail',
        'bpc_agentMobile',
        'bpc_beneficiary',
        'bpc_companyAddress',
        'bpc_beneficiaryBankName',
        'bpc_bankAccount',
        'bpc_bankAddress',
        'bpc_swiftBic',
        'bpc_usedCreditLimit_currency',
        'bpc_detail_currency1' ,
        'bpc_detail_currency2',
        'bpc_detail_currency3',
        'bpc_detail_currency4',
        'bpc_detail_currency5',
        'bpc_detail_currency6'
        ]
    }
  },
  components: {
     exportExcel
  }
}
</script>

<style lang="scss">


.profitcalculation {
    padding: 20px;
    border: 1px solid #999;

  .relate-color {
    // background-color: #efa54b36 !important;

    input {
      background-color: transparent !important;
    }
   }

    .select-currency {
      select {
        margin-left: 12px;
        height: 30px;
        width: 60px;
      }
    }
    .head {
      > h2 {
        text-align: center;
      }
      .head-ctrl {
        height: 60px;
        .order-number {
          padding: 16px 0px;
          float: left;
        }
        button {
          float: right;
        }
      }

      .head-number {
        .el-input {
          width: 400px;
        }
      }
    }

    .head-1 {
      text-align: center;
      padding: 20px;
      position: relative;

      .tcf-png {
        position: absolute;
        width: 90px;
        left: 48px;
        top: 6px;
      }
    }

    .contract {
      >h1 {
        text-align: center;
      }

     .address-input {
        width: 94%;
        border: 1px solid #999;
        height: 32px;
        border-radius: 4px;
        padding-left: 10px;
    }

      .contract-order {
          float: right;
      }

      .contract-seller {
        >p {
          >span {
            font-weight: bolder;
          }
          margin-bottom:20px;
        }
      }

    }

    .table-1 {
      border: 1px solid gray;
      border-right: none;
      border-bottom: none;

      text-align: center;

      input {
        border: none;
        outline: none;
        width: 75%;
        height: 28px;
      }

      .el-col {
        height: 32px;
        border-right: 1px solid gray;
        border-bottom: 1px solid gray;
      }

      select {
        border: none;
        background: #fff;
      }
    }

    .table-2 {
      margin-top: 20px;
      margin-bottom: 30px;

      .title {
        font-weight: bolder;
        margin-bottom: 10px;
      }

      .table-rows {
        border: 1px solid gray;
        border-right: none;
        border-bottom: none;
        text-align: center;

        input {
          border: none;
          outline: none;
          width: 84%;
          height: 80%;
        }

        .el-col {
          border-right: 1px solid gray;
          border-bottom: 1px solid gray;
          height: 80px;
        }

        textarea {
          border: none;
          outline: none;
          text-align: left;
          width: 96%;
          height: 88%;
          font-size: 12px;
        }

        .el-col--noright {
           border-right: none;
        }

        .row-1 {
          .el-col:first-child{
            line-height: 25px;
          }
        }

        .row-2 {
          position: relative;

          .currency {
            position:  absolute ;
            top: 0;
            left: 0;
            width: 4.0%;
            height: 90px;
            background-color: #fff;

            select {
              width: 95%;
              height: 50px;
              border: none;
              background: #fff;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate3d(-50%, -50%, 0);
            }
          }
        }

        .row-4 {
          position: relative;

          .currency {
            position:  absolute ;
            top: 30%;
            left: 0;
            width: 4.0%;
            height: 40px;
            background-color: #fff;

            select {
              width: 95%;
              height: 40px;
              border: none;
              background: #fff;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate3d(-50%, -50%, 0);
            }
          }
        }


        .row-5 {
          position: relative;

          .currency {
            position:  absolute ;
            top: 30%;
            left: 0;
            width: 4.0%;
            height: 290px;
            background-color: #fff;
            z-index: 1;

            select {
              width: 95%;
              height: 150px;
              border: none;
              background: #fff;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate3d(-50%, -50%, 0);
            }
          }
        }

        .row-10 {
          position: relative;

          .currency {
            position:  absolute ;
            top: 30%;
            left: 0;
            width: 4.0%;
            height: 210px;
            background-color: #fff;
            z-index: 1;

            select {
              width: 95%;
              height: 100px;
              border: none;
              background: #fff;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate3d(-50%, -50%, 0);
            }
          }
        }

        

        .row-13 {
          position: relative;

          .currency {
            position:  absolute ;
            top: 0%;
            left: 0;
            width: 4.0%;
            height: 75px;
            background-color: #fff;
            z-index: 1;

            select {
              width: 95%;
              height: 40px;
              border: none;
              background: #fff;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate3d(-50%, -50%, 0);
            }
          }
        }
        
        .row-15 {
          position: relative;

          .currency {
            position:  absolute ;
            top: 0%;
            left: 0;
            width: 4.0%;
            height: 230px;
            background-color: #fff;
            z-index: 1;

            select {
              width: 95%;
              height: 110px;
              border: none;
              background: #fff;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate3d(-50%, -50%, 0);
            }
          }
        }

        .row-1, .row-2, .row-3 {
          .el-col {
            height: 50px;
          }
        }

        .row-1 {
            .el-col {
                line-height: 50px;
            }
        }

        .row-3 .spec-row {
            .el-col {
                line-height: 50px;
            }
        }

        .row-4 {
          .spec-input {
            width: 60%;
          }
        }

        .row-3, .row-7, .row-11{
          .spec-char {
            line-height: 80px;
          }
        }

        .row-3, .row-7, .row-11 {
          .spec-input {
            width: 60%;
          }
        }



        .row-4, .row-10, .row-13, .row-17 {
           .spec-char {
            line-height: 80px;
          }
        }

        .row-5,
        .row-6,
        .row-16{
           .spec-char {
            line-height: 80px;
           }
           .spec-input {
             width: 80%;
           }
        }


        .row-8{
           .spec-char {
            line-height: 80px;
          }
        }

        .row-9, .row-14 {
            .el-col {
                line-height: 80px;
            }
        }
      }
    }

    .table-3 {

       margin-bottom: 20px;

        td {
        border: 1px solid #e6ebf5;
        }

        .el-table__body-wrapper {
        overflow: hidden;
        }


        .el-table thead.is-group th {
            background: #e6e6e6;
            padding-bottom: 0;
            padding-top: 0;
        }
    
       .cell {
            height: 100%;
        }
        .cell-edit-input {
            display: block;
            width: 100%;
            height: 100%;

            input {
                width: 100%;
                height:100%;
                border: none;
                outline: none;
                background-color: transparent;
            }
            input.spec-input {
            width: 90%;
            }
        }
    }

    .other {
        margin-bottom: 30px;

        .other-time {
            .el-col {
                height: 40px;
            }
        }

        .el-col {
            >span {
                display: inline-block;
                height: 30px;
                line-height: 30px;
            }
        }

        .el-row {
            margin-bottom: 10px;
        }

        .el-row:not(.other-time){
           input {
             width: 100%;
             height: 30px;
             border: 1px solid #e5e5e5;
             border-radius: 2px;
             outline: none;
             background-color: transparent;
            }
        }


        p {
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            font-weight: bolder;
        }

    }

    
    .upload {
      >div {
        border: 1px solid #999;
        padding: 20px 0px 40px 20px;
      }

      .upload-btn {
        position: relative;
        >input {
          opacity: 0;
          width: 100px;
          height: 40px;
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      .upload-files {

          > li {
              width: 300px;
              padding: 10px 0;
              transition: all 0.5s linear;

              &:hover {

                >span {
                  color: #409EFF;
                }
              }
            }

          font-size: 16px;
          span {
              padding: 0 10px;
              cursor: pointer;
              display: inline;
          }
          span.el-icon-close:hover {
              cursor: pointer;
          }
      }
      .upload-hint {
        font-size: 20px;
        margin-bottom: 10px;
      }
    }
}
</style>


